<template>
  <div class="city h100">
    <div>
      <h4>自动定位</h4>
      <p class="city_name">
        {{ city.CityName }}
      </p>
    </div>

    <div>
      <h4>省份</h4>
      <p v-for="item in province" @click="changeCityID(item.CityID)" :key="item.CityID" class="city_name">
        {{ item.CityName }}
      </p>
    </div>

    <transition name="slideleft">
      <div v-if="mark" class="city2">
        <div @click="mark = false" class="mark"></div>
        <div class="list">
          <p v-for="item in cityList" @click="changeCityName(item.CityName)" :key="item.CityID" class="city_name">
             {{ item.CityName }}
          </p>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { getCityAlllist } from "@/api/carList";
export default {
  props: ["cityInfo"],
  data() {
    return {
      city: {},
      province: [],
      cityList: [],
      mark: false
    };
  },
  async created() {
    let res = await getCityAlllist();
    this.province = res.data.data;
    console.log(res.data.data);
  },
  // 路由改变   vuex
  watch: {
    cityInfo: {
      deep: true,
      handler(newVal) {
        this.city = newVal;
        console.log(this.city);
      },
    },
  },
  methods: {
      async changeCityID(provinceid) {
          this.mark = true

          let res = await getCityAlllist({
              provinceid
          })
          this.cityList = res.data.data
          console.log(res.data.data)
      },
      changeCityName(name) {
        //   this.mark = false

          this.$emit("changeCityName", {
              cityFlag: false,
              name
          })

          setTimeout(() => {
              this.mark = false
          }, 300)
      }
  }
};
</script>

<style lang="scss" scoped>
.city {
  width: 100%;
  position: fixed;
  top: 0;
  background: #fff;
  overflow: scroll;
}

.city2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

h4 {
  padding: 0 8px;
  height: 25px;
  line-height: 25px;
  font-weight: 500;
  font-size: 12px;
  background: #f4f4f4;
}

.city_name {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
  padding-left: 15px;
}

.city_name:last-child {
  border-bottom: none;
}

.mark {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
}

.list {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background: #fff;
}
</style>